<template>
	<view class="container">
		<z-paging ref="paging" v-model="dataList" @query="queryList">
			<view slot="top" class="content-wrapper" style="background-color: #ffffff;">
				<view class="search-box">
					<u-search placeholder="请输入关键字搜索" v-model="formData.kw" :show-action="false" :clearabled="true"
						:animation="false" shape="round" bgColor="#F5F6FA" height="72rpx" searchIconColor="#999999"
						placeholderColor="#999999" @change="$u.debounce(refreshList, 500)" :inputStyle="{
							color: '#333333',
							backgroundColor: '#F5F6FA',
						}"></u-search>
				</view>
				<view class="title-bar">
					<view class="t0">月份</view>
					<view class="t1">名称</view>
					<view class="t2">总金额</view>
				</view>
			</view>
			<!-- 列表 -->
			<view class="record" v-for="(item,index) in dataList" :key="index">
				<view class="t0">{{item.month}}</view>
				<view class="t1">{{item.category}}</view>
				<view class="t2">{{item.total_money}}元</view>
			</view>
			<view slot="bottom">
				<view class="safe-bottom action-bar">
					<view class="action-item" @click="handleAll">{{buildingName}}</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	import {
		category_stat
	} from '@/api/landlord.js'
	export default {
		data() {
			return {
				dataList: [],
				formData: {
					kw: '',
					build_id: ''
				},
				total: 0,
				buildingName: '全部大楼',
			};
		},
		onShow() {
			uni.$on('selectBuilding', (building) => {
				this.formData.build_id = building.id; // 设置选中的大楼ID
				this.buildingName = building.address
				this.refreshList(); // 刷新列表
			});
		},
		onUnload() {
			uni.$off('selectBuilding'); // 清除事件监听
		},
		methods: {
			handleAll() {
				this.$Tips('/pages-landlord/select-building/select-building')
			},
			refreshList() {
				if (this.$refs.paging) {
					this.$refs.paging.refresh();
				}
			},
			queryList(pageNo, pageSize) {
				category_stat({
					...this.formData,
					page: pageNo,
					page_size: pageSize
				}).then(res => {
					this.total = res.data.data.total
					this.$refs.paging.complete(res.data.data.data);
				}).catch(res => {
					this.$refs.paging.complete(false);
				})
			},
		},
	};
</script>

<style lang="less" scoped>
	.container {
		min-height: 100vh;
		background-color: #f5f6fa;
	}

	.font-color-red {
		color: #FF5900;
	}

	.font-color-green {
		color: #2FAA4E;
	}

	.search-box {
		padding: 24rpx 32rpx;

		:deep(.u-search) {
			background-color: #ffffff !important;
			border-radius: 36rpx;
			box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.05);

			.u-search__content {
				background-color: #ffffff !important;
				height: 72rpx;
				padding: 0 30rpx;

				.u-search__content__icon {
					margin-right: 8rpx;
				}

				.u-search__content__input {
					font-size: 28rpx;
				}
			}
		}
	}

	.title-bar {
		font-size: 24rpx;
	}

	.record {
		font-size: 28rpx;
	}

	.record,
	.title-bar {
		margin: 0 30rpx;
		padding: 26rpx 0;
		border-bottom: 1px solid #dddddd;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.action-bar {
		font-size: 28rpx;
		width: 100%;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-around;
		line-height: 80rpx;
		background-color: #FFFFFF;

		.action-item {
			font-weight: 600;
			display: flex;
			flex-direction: column;
			align-items: center;
			flex: 1;
			text-align: center;
		}
	}
</style>